<template>
  <div class="photo-pagination">
    <div class="pagination-info">
      显示 {{ startItem }}-{{ endItem }} 项，共 {{ totalItems }} 项
    </div>
    
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[20, 50, 100, 200]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next, jumper"
      :total="totalItems"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { usePhotoStore } from '@/stores/photo';
import { ElPagination } from 'element-plus';

const photoStore = usePhotoStore();

// 分页配置
const small = ref(true);
const disabled = ref(false);
const background = ref(true);

// 当前页码
const currentPage = computed({
  get: () => photoStore.pagination.page,
  set: (value) => {
    photoStore.setPaginationPage(value);
  }
});

// 每页大小
const pageSize = computed({
  get: () => photoStore.pagination.limit,
  set: (value) => {
    photoStore.setPaginationLimit(value);
  }
});

// 总项目数
const totalItems = computed(() => photoStore.pagination.total);

// 计算显示范围
const startItem = computed(() => {
  if (totalItems.value === 0) return 0;
  return (currentPage.value - 1) * pageSize.value + 1;
});

const endItem = computed(() => {
  const end = currentPage.value * pageSize.value;
  return end > totalItems.value ? totalItems.value : end;
});

// 处理页码变化
const handleCurrentChange = (page: number) => {
  photoStore.setPaginationPage(page);
  photoStore.fetchPhotos();
};

// 处理每页大小变化
const handleSizeChange = (size: number) => {
  photoStore.setPaginationLimit(size);
  photoStore.setPaginationPage(1); // 重置到第一页
  photoStore.fetchPhotos();
};
</script>

<style scoped lang="scss">
.photo-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color-light);
  
  .pagination-info {
    color: var(--el-text-color-regular);
    font-size: 14px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .photo-pagination {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    
    .pagination-info {
      align-self: flex-start;
    }
  }
}
</style>